<link rel="import" href="../../bower_components/polymer/polymer-element.html">


<dom-module id="system-menu">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: row;
        background-color: #333;
        height: 64px;
        padding-left: 12px;
        align-items: center;
      }
      .menu-item {
        margin-right: 12px;
        --neuro-btn-icon-size: 36px;
        --neuro-btn-font-size: 28px;
      }
      /*
      .menu-item {
        height: 40px;
        width: 40px;
        background-color: #111;
        border: 2px solid #444;
        border-radius: 8px;
        box-shadow: -2px 0px 2px #222, 0px -2px 2px #222, 2px 0px 2px #222, 0px 2px 2px #222;
        color: #fff;
        cursor: pointer;
        font-size: 20px;
        margin-right: 12px;
        user-select: none;
      }
      .menu-item:active {
        box-shadow: -1px 0px 1px #222, 0px -1px 2px #222, 1px 0px 1px #222, 0px 1px 1px #222;
      }
      */
    </style>
    <neuro-btn class="menu-item" title="Toggle Effects" on-click="_toggleEffects">timer</neuro-btn>
    <neuro-btn class="menu-item" title="Toggle Quests" on-click="_toggleQuests">assignment_late</neuro-btn>
  </template>
  <script>
    /**
     * @customElement
     * @polymer
     */
    class SystemMenu extends Polymer.Element {
      static get is() { return 'system-menu'; }
      static get properties() {
        return { };
      }

      _toggleEffects() {
        this.dispatchEvent(new CustomEvent('toggle-effects'));
      }

      _toggleQuests() {
        this.dispatchEvent(new CustomEvent('toggle-quests'));
      }
    }

    window.customElements.define(SystemMenu.is, SystemMenu);
  </script>
</dom-module>

